റിയാക്ട് പോർട്ടൽ ഇവന്റ് ടണലിംഗ്: കരുത്തുറ്റ യുഐകൾക്കായി ഡീപ് ഇവന്റ് പ്രൊപ്പഗേഷൻ

ഫ്രണ്ട്-എൻഡ് ഡെവലപ്‌മെന്റിന്റെ എപ്പോഴും വികസിച്ചുകൊണ്ടിരിക്കുന്ന ലോകത്ത്, സങ്കീർണ്ണവും ഉയർന്ന തോതിൽ ഇന്ററാക്ടീവുമായ യൂസർ ഇന്റർഫേസുകൾ നിർമ്മിക്കാൻ റിയാക്ട് ലോകമെമ്പാടുമുള്ള ഡെവലപ്പർമാരെ ശാക്തീകരിക്കുന്നത് തുടരുന്നു. റിയാക്ടിലെ ഒരു ശക്തമായ ഫീച്ചറായ പോർട്ടലുകൾ, പാരന്റ് കമ്പോണന്റിന്റെ ശ്രേണിക്ക് പുറത്തുള്ള ഒരു ഡോം നോഡിലേക്ക് ചൈൽഡ് കമ്പോണന്റുകളെ റെൻഡർ ചെയ്യാൻ നമ്മളെ അനുവദിക്കുന്നു. മോഡലുകൾ, ടൂൾടിപ്പുകൾ, നോട്ടിഫിക്കേഷനുകൾ തുടങ്ങിയ യുഐ ഘടകങ്ങൾ നിർമ്മിക്കുന്നതിന് ഈ കഴിവ് അമൂല്യമാണ്, കാരണം അവയ്ക്ക് പാരന്റിന്റെ സ്റ്റൈലിംഗ്, z-index നിയന്ത്രണങ്ങൾ, അല്ലെങ്കിൽ ലേഔട്ട് പ്രശ്‌നങ്ങളിൽ നിന്ന് മോചനം ആവശ്യമാണ്. എന്നിരുന്നാലും, ടോക്കിയോ മുതൽ ടൊറന്റോ വരെയും സാവോ പോളോ മുതൽ സിഡ്‌നി വരെയുമുള്ള ഡെവലപ്പർമാർ കണ്ടെത്തുന്നതുപോലെ, പോർട്ടലുകൾ അവതരിപ്പിക്കുന്നത് ഒരു നിർണായക ചോദ്യം ഉയർത്തുന്നു: ഇത്തരത്തിൽ വേർപിരിഞ്ഞ രീതിയിൽ റെൻഡർ ചെയ്യപ്പെടുന്ന കമ്പോണന്റുകളിലൂടെ ഇവന്റുകൾ എങ്ങനെയാണ് പ്രൊപ്പഗേറ്റ് ചെയ്യുന്നത്?

ഈ സമഗ്രമായ ഗൈഡ് റിയാക്ട് പോർട്ടൽ ഇവന്റ് ടണലിംഗിന്റെ കൗതുകകരമായ ലോകത്തേക്ക് ആഴത്തിൽ ഇറങ്ങിച്ചെല്ലുന്നു. നിങ്ങളുടെ കമ്പോണന്റുകൾ പരമ്പരാഗത ഡോക്യുമെന്റ് ഒബ്ജക്റ്റ് മോഡൽ (ഡോം) ശ്രേണിയെ ധിക്കരിക്കുന്നതായി തോന്നുമ്പോൾ പോലും, റിയാക്ടിന്റെ സിന്തറ്റിക് ഇവന്റ് സിസ്റ്റം എങ്ങനെയാണ് കരുത്തുറ്റതും പ്രവചിക്കാവുന്നതുമായ ഇവന്റ് പ്രൊപ്പഗേഷൻ ഉറപ്പാക്കുന്നതെന്ന് ഞങ്ങൾ വിശദീകരിക്കും. ഈ "ടണലിംഗ്" മെക്കാനിസം മനസ്സിലാക്കുന്നതിലൂടെ, അപ്രതീക്ഷിതമായ ഇവന്റ് സ്വഭാവങ്ങൾ നേരിടാതെ പോർട്ടലുകളെ തടസ്സമില്ലാതെ സംയോജിപ്പിച്ച്, കൂടുതൽ പ്രതിരോധശേഷിയുള്ളതും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാനുള്ള വൈദഗ്ദ്ധ്യം നിങ്ങൾ നേടും. വൈവിധ്യമാർന്ന ആഗോള പ്രേക്ഷകർക്കും ഉപകരണങ്ങൾക്കും സ്ഥിരതയുള്ളതും പ്രവചിക്കാവുന്നതുമായ ഒരു ഉപയോക്തൃ അനുഭവം നൽകുന്നതിന് ഈ അറിവ് നിർണായകമാണ്.

റിയാക്ട് പോർട്ടലുകൾ മനസ്സിലാക്കാം: വേർപിരിഞ്ഞ ഡോമിലേക്കുള്ള ഒരു പാലം

അടിസ്ഥാനപരമായി, ഒരു റിയാക്ട് പോർട്ടൽ, അതിനെ ലോജിക്കലായി റെൻഡർ ചെയ്യുന്ന കമ്പോണന്റിന്റെ ഡോം ശ്രേണിക്ക് പുറത്തുള്ള ഒരു ഡോം നോഡിലേക്ക് ഒരു ചൈൽഡ് കമ്പോണന്റിനെ റെൻഡർ ചെയ്യാനുള്ള ഒരു മാർഗ്ഗം നൽകുന്നു. ഇത് ReactDOM.createPortal(child, container) ഉപയോഗിച്ചാണ് നേടുന്നത്. child പാരാമീറ്റർ റെൻഡർ ചെയ്യാവുന്ന ഏതൊരു റിയാക്ട് ചൈൽഡും (ഉദാഹരണത്തിന്, ഒരു എലമെന്റ്, സ്ട്രിംഗ്, അല്ലെങ്കിൽ ഫ്രാഗ്മെന്റ്) ആകാം, കൂടാതെ container ഒരു ഡോം എലമെന്റാണ്, സാധാരണയായി document.createElement() ഉപയോഗിച്ച് സൃഷ്ടിച്ച് document.body-യിലേക്ക് ചേർത്തതോ, അല്ലെങ്കിൽ document.getElementById('some-global-root') പോലുള്ള നിലവിലുള്ള ഒരു എലമെന്റോ ആകാം.

പോർട്ടലുകൾ ഉപയോഗിക്കുന്നതിനുള്ള പ്രധാന പ്രചോദനം സ്റ്റൈലിംഗും ലേഔട്ട് പരിമിതികളുമാണ്. ഒരു ചൈൽഡ് കമ്പോണന്റ് അതിന്റെ പാരന്റിനുള്ളിൽ നേരിട്ട് റെൻഡർ ചെയ്യുമ്പോൾ, അത് overflow: hidden, z-index സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റുകൾ, ലേഔട്ട് നിയന്ത്രണങ്ങൾ തുടങ്ങിയ പാരന്റിന്റെ സിഎസ്എസ് പ്രോപ്പർട്ടികൾ പാരമ്പര്യമായി സ്വീകരിക്കുന്നു. ചില യുഐ ഘടകങ്ങൾക്ക് ഇത് പ്രശ്‌നകരമാകും.

എന്തുകൊണ്ട് റിയാക്ട് പോർട്ടലുകൾ ഉപയോഗിക്കണം? സാധാരണ ആഗോള ഉപയോഗങ്ങൾ:

• മോഡലുകളും ഡയലോഗുകളും: ഇവ സാധാരണയായി ഡോമിന്റെ ഏറ്റവും മുകളിലത്തെ തലത്തിൽ ഇരിക്കേണ്ടതുണ്ട്, അങ്ങനെ അവ മറ്റെല്ലാ ഉള്ളടക്കത്തിനും മുകളിൽ ദൃശ്യമാകുന്നു എന്ന് ഉറപ്പാക്കാൻ കഴിയും, കൂടാതെ പാരന്റിന്റെ overflow: hidden അല്ലെങ്കിൽ z-index പോലുള്ള സിഎസ്എസ് നിയമങ്ങളാൽ ബാധിക്കപ്പെടാതെയും ഇരിക്കും. ഒരു ഉപയോക്താവ് ബെർലിനിലോ, ബാംഗ്ലൂരിലോ, അല്ലെങ്കിൽ ബ്യൂണസ് ഐറിസിലോ ആകട്ടെ, സ്ഥിരതയുള്ള ഒരു ഉപയോക്തൃ അനുഭവം നൽകുന്നതിന് ഇത് നിർണായകമാണ്.
• ടൂൾടിപ്പുകളും പോപ്പ്ഓവറുകളും: മോഡലുകൾക്ക് സമാനമായി, ഇവയ്ക്ക് പലപ്പോഴും പൂർണ്ണമായ ദൃശ്യപരതയും വ്യൂപോർട്ടിന് ആപേക്ഷികമായി ശരിയായ സ്ഥാനവും ഉറപ്പാക്കാൻ അവയുടെ പാരന്റിന്റെ ക്ലിപ്പിംഗ് അല്ലെങ്കിൽ പൊസിഷനിംഗ് കോൺടെക്സ്റ്റുകളിൽ നിന്ന് രക്ഷപ്പെടേണ്ടതുണ്ട്. ഒരു ടൂൾടിപ്പ് അതിന്റെ പാരന്റിന് overflow: hidden ഉള്ളതുകൊണ്ട് മുറിഞ്ഞുപോകുന്നത് സങ്കൽപ്പിക്കുക - പോർട്ടലുകൾ ഇത് പരിഹരിക്കുന്നു.
• നോട്ടിഫിക്കേഷനുകളും ടോസ്റ്റുകളും: ആപ്ലിക്കേഷൻ-വൈഡ് സന്ദേശങ്ങൾ, അവ കമ്പോണന്റ് ട്രീയിൽ എവിടെ ട്രിഗർ ചെയ്യപ്പെട്ടാലും സ്ഥിരതയോടെ ദൃശ്യമാകണം. അവ ഉപയോക്താക്കൾക്ക് ആഗോളതലത്തിൽ, പലപ്പോഴും തടസ്സമില്ലാത്ത രീതിയിൽ നിർണായക ഫീഡ്‌ബ্যাক നൽകുന്നു.
• കോൺടെക്സ്റ്റ് മെനുകൾ: മൗസ് പോയിന്ററിന് ആപേക്ഷികമായി റെൻഡർ ചെയ്യുകയും പാരന്റിന്റെ നിയന്ത്രണങ്ങളിൽ നിന്ന് രക്ഷപ്പെടുകയും ചെയ്യേണ്ട റൈറ്റ്-ക്ലിക്ക് മെനുകൾ അല്ലെങ്കിൽ കസ്റ്റം കോൺടെക്സ്റ്റ് മെനുകൾ, എല്ലാ ഉപയോക്താക്കൾക്കും സ്വാഭാവികമായ ഒരു ഇന്ററാക്ഷൻ ഫ്ലോ നിലനിർത്തുന്നു.

ഒരു ലളിതമായ ഉദാഹരണം പരിഗണിക്കുക:

            
// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React Portal Example</title>
  </head>
  <body>
    <div id="root"></div>
    <div id="modal-root"></div> <!-- This is our Portal target -->
    <script src="index.js"></script>
  </body>
</html>

// App.js (simplified for clarity)
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [showModal, setShowModal] = React.useState(false);

  return (
    <div style={{ border: '2px solid red', padding: '20px' }}>
      <h1>Main Application Content</h1>
      <p>This content resides in the #root div.</p>
      <button onClick={() => setShowModal(true)}>Show Modal</button>
      {showModal && <Modal onClose={() => setShowModal(false)} />}
    </div>
  );
}

function Modal({ onClose }) {
  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0, left: 0, right: 0, bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}>
      <div style={{ backgroundColor: 'white', padding: '30px', borderRadius: '8px' }}>
        <h2>Hello from a Portal!</h2>
        <p>This content is rendered in '#modal-root', not inside '#root'.</p>
        <button onClick={onClose}>Close Modal</button>
      </div>
    </div>,
    document.getElementById('modal-root') // The second argument: the target DOM node
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, റിയാക്ട് കമ്പോണന്റ് ട്രീയിൽ Modal കമ്പോണന്റ് ലോജിക്കലായി App-ന്റെ ഒരു ചൈൽഡ് ആണ്. എന്നിരുന്നാലും, അതിന്റെ ഡോം എലമെന്റുകൾ index.html-ലെ #modal-root div-നുള്ളിലാണ് റെൻഡർ ചെയ്യപ്പെടുന്നത്, ഇത് App-ഉം അതിന്റെ പിൻഗാമികളും (ഉദാഹരണത്തിന് "Show Modal" ബട്ടൺ) സ്ഥിതിചെയ്യുന്ന #root div-ൽ നിന്ന് പൂർണ്ണമായും വേറിട്ടതാണ്. ഈ ഘടനാപരമായ സ്വാതന്ത്ര്യമാണ് അതിന്റെ ശക്തിയുടെ താക്കോൽ.

റിയാക്ടിന്റെ ഇവന്റ് സിസ്റ്റം: സിന്തറ്റിക് ഇവന്റുകളെയും ഡെലിഗേഷനെയും കുറിച്ചുള്ള ഒരു ഓർമ്മപ്പെടുത്തൽ

പോർട്ടലുകളുടെ പ്രത്യേകതകളിലേക്ക് കടക്കുന്നതിന് മുൻപ്, റിയാക്ട് എങ്ങനെ ഇവന്റുകൾ കൈകാര്യം ചെയ്യുന്നു എന്നതിനെക്കുറിച്ച് ഉറച്ച ധാരണയുണ്ടായിരിക്കേണ്ടത് അത്യാവശ്യമാണ്. നേറ്റീവ് ബ്രൗസർ ഇവന്റ് ലിസണറുകൾ നേരിട്ട് അറ്റാച്ച് ചെയ്യുന്നതിൽ നിന്ന് വ്യത്യസ്തമായി, റിയാക്ട് പല കാരണങ്ങൾകൊണ്ടും ഒരു സങ്കീർണ്ണമായ സിന്തറ്റിക് ഇവന്റ് സിസ്റ്റം ഉപയോഗിക്കുന്നു:

• ക്രോസ്-ബ്രൗസർ സ്ഥിരത: നേറ്റീവ് ബ്രൗസർ ഇവന്റുകൾ വിവിധ ബ്രൗസറുകളിൽ വ്യത്യസ്തമായി പെരുമാറാൻ സാധ്യതയുണ്ട്, ഇത് പൊരുത്തക്കേടുകളിലേക്ക് നയിച്ചേക്കാം. റിയാക്ടിന്റെ SyntheticEvent ഒബ്ജക്റ്റുകൾ നേറ്റീവ് ബ്രൗസർ ഇവന്റുകളെ പൊതിയുന്നു, ഇത് പിന്തുണയ്ക്കുന്ന എല്ലാ ബ്രൗസറുകളിലും ഒരു സാധാരണവും സ്ഥിരതയുള്ളതുമായ ഇന്റർഫേസും പെരുമാറ്റവും നൽകുന്നു, ന്യൂയോർക്കിലെ ഒരു ഉപകരണത്തിൽ നിന്ന് ന്യൂഡൽഹിയിലെ ഒരു ഉപകരണത്തിലേക്ക് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ പ്രവചനാതീതമായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.
• പ്രകടനവും മെമ്മറി കാര്യക്ഷമതയും (ഇവന്റ് ഡെലിഗേഷൻ): റിയാക്ട് ഓരോ ഡോം എലമെന്റിലും ഒരു ഇവന്റ് ലിസണർ അറ്റാച്ച് ചെയ്യുന്നില്ല. പകരം, ഇത് സാധാരണയായി നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ റൂട്ടിൽ (ഉദാഹരണത്തിന്, `document` ഒബ്ജക്റ്റ് അല്ലെങ്കിൽ പ്രധാന റിയാക്ട് കണ്ടെയ്നർ) ഒരൊറ്റ (അല്ലെങ്കിൽ കുറച്ച്) ഇവന്റ് ലിസണർ(കൾ) അറ്റാച്ച് ചെയ്യുന്നു. ഒരു നേറ്റീവ് ഇവന്റ് ഡോം ട്രീയിലൂടെ ഈ റൂട്ടിലേക്ക് ബബിൾ ചെയ്യുമ്പോൾ, റിയാക്ടിന്റെ ഡെലിഗേറ്റഡ് ലിസണർ അതിനെ പിടിച്ചെടുക്കുന്നു. ഇവന്റ് ഡെലിഗേഷൻ എന്നറിയപ്പെടുന്ന ഈ സാങ്കേതികവിദ്യ മെമ്മറി ഉപഭോഗം ഗണ്യമായി കുറയ്ക്കുകയും പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു, പ്രത്യേകിച്ചും ധാരാളം ഇന്ററാക്ടീവ് എലമെന്റുകളോ അല്ലെങ്കിൽ ഡൈനാമിക്കായി ചേർക്കുകയും നീക്കം ചെയ്യുകയും ചെയ്യുന്ന കമ്പോണന്റുകളോ ഉള്ള ആപ്ലിക്കേഷനുകളിൽ.
• ഇവന്റ് പൂളിംഗ്: പ്രകടനത്തിനായി SyntheticEvent ഒബ്ജക്റ്റുകൾ പൂൾ ചെയ്യുകയും പുനരുപയോഗിക്കുകയും ചെയ്യുന്നു. ഇതിനർത്ഥം ഒരു SyntheticEvent ഒബ്ജക്റ്റിന്റെ പ്രോപ്പർട്ടികൾ ഇവന്റ് ഹാൻഡ്‌ലറുടെ എക്സിക്യൂഷൻ സമയത്ത് മാത്രമേ സാധുവാകുകയുള്ളൂ. നിങ്ങൾക്ക് ഇവന്റ് പ്രോപ്പർട്ടികൾ അസിൻക്രണസായി നിലനിർത്തണമെങ്കിൽ, നിങ്ങൾ `e.persist()` വിളിക്കുകയോ അല്ലെങ്കിൽ ആവശ്യമായ പ്രോപ്പർട്ടികൾ എക്‌സ്‌ട്രാക്റ്റുചെയ്യുകയോ ചെയ്യണം.

ഇവന്റ് ഘട്ടങ്ങൾ: ക്യാപ്‌ചറിംഗും (ടണലിംഗ്) ബബ്ലിംഗും

ബ്രൗസർ ഇവന്റുകളും, അതുവഴി റിയാക്ടിന്റെ സിന്തറ്റിക് ഇവന്റുകളും, രണ്ട് പ്രധാന ഘട്ടങ്ങളിലൂടെ പുരോഗമിക്കുന്നു:

• ക്യാപ്‌ചറിംഗ് ഘട്ടം (അല്ലെങ്കിൽ ടണലിംഗ് ഘട്ടം): ഇവന്റ് വിൻഡോയിൽ നിന്ന് ആരംഭിച്ച്, ഡോം ട്രീയിലൂടെ (അല്ലെങ്കിൽ റിയാക്ട് കമ്പോണന്റ് ട്രീയിലൂടെ) ടാർഗെറ്റ് എലമെന്റിലേക്ക് താഴേക്ക് സഞ്ചരിക്കുന്നു. നേറ്റീവ് ഡോം API-കളിൽ `useCapture: true` ഉപയോഗിച്ച് രജിസ്റ്റർ ചെയ്ത ലിസണറുകൾ, അല്ലെങ്കിൽ റിയാക്ടിന്റെ പ്രത്യേക `onClickCapture`, `onMouseDownCapture`, തുടങ്ങിയവ ഈ ഘട്ടത്തിൽ ട്രിഗർ ചെയ്യപ്പെടുന്നു. ഈ ഘട്ടം ഒരു ഇവന്റ് അതിന്റെ ടാർഗെറ്റിൽ എത്തുന്നതിന് മുൻപ് പാരന്റ് എലമെന്റുകളെ തടസ്സപ്പെടുത്താൻ അനുവദിക്കുന്നു.
• ബബ്ലിംഗ് ഘട്ടം: ടാർഗെറ്റ് എലമെന്റിൽ എത്തിയ ശേഷം, ഇവന്റ് ടാർഗെറ്റ് എലമെന്റിൽ നിന്ന് വിൻഡോയിലേക്ക് തിരികെ ബബിൾ ചെയ്യുന്നു. മിക്ക സ്റ്റാൻഡേർഡ് ഇവന്റ് ലിസണറുകളും (റിയാക്ടിന്റെ `onClick`, `onMouseDown` പോലുള്ളവ) ഈ ഘട്ടത്തിൽ ട്രിഗർ ചെയ്യപ്പെടുന്നു, ഇത് പാരന്റ് എലമെന്റുകളെ അവയുടെ ചൈൽഡ് കമ്പോണന്റുകളിൽ നിന്ന് ഉത്ഭവിക്കുന്ന ഇവന്റുകളോട് പ്രതികരിക്കാൻ അനുവദിക്കുന്നു.

ഇവന്റ് പ്രൊപ്പഗേഷൻ നിയന്ത്രിക്കൽ:

• e.stopPropagation(): ഈ രീതി റിയാക്ടിന്റെ സിന്തറ്റിക് ഇവന്റ് സിസ്റ്റത്തിൽ ക്യാപ്‌ചറിംഗ്, ബബ്ലിംഗ് ഘട്ടങ്ങളിൽ ഇവന്റ് കൂടുതൽ പ്രൊപ്പഗേറ്റ് ചെയ്യുന്നത് തടയുന്നു. നേറ്റീവ് ഡോമിൽ, ഇത് നിലവിലെ ഇവന്റ് ഡോം ട്രീയിലൂടെ മുകളിലേക്ക് (ബബ്ലിംഗ്) അല്ലെങ്കിൽ താഴേക്ക് (ക്യാപ്‌ചറിംഗ്) പ്രൊപ്പഗേറ്റ് ചെയ്യുന്നത് തടയുന്നു. ഇത് ഒരു ശക്തമായ ഉപകരണമാണ്, പക്ഷേ വിവേകത്തോടെ ഉപയോഗിക്കണം.
• e.preventDefault(): ഈ രീതി ഇവന്റുമായി ബന്ധപ്പെട്ട ഡിഫോൾട്ട് പ്രവർത്തനം നിർത്തുന്നു (ഉദാഹരണത്തിന്, ഒരു ഫോം സമർപ്പിക്കുന്നത് തടയുക, ഒരു ലിങ്ക് നാവിഗേറ്റ് ചെയ്യുന്നത് തടയുക, അല്ലെങ്കിൽ ഒരു ചെക്ക്ബോക്സ് ടോഗിൾ ചെയ്യുന്നത് തടയുക). എന്നിരുന്നാലും, ഇത് ഇവന്റ് പ്രൊപ്പഗേറ്റ് ചെയ്യുന്നത് നിർത്തുന്നില്ല.

പോർട്ടൽ "വിരോധാഭാസം": ഡോം വേഴ്സസ് റിയാക്ട് ട്രീ

പോർട്ടലുകളും ഇവന്റുകളും കൈകാര്യം ചെയ്യുമ്പോൾ മനസ്സിലാക്കേണ്ട പ്രധാന ആശയം റിയാക്ട് കമ്പോണന്റ് ട്രീ (ലോജിക്കൽ ഹൈറാർക്കി), ഡോം ഹൈറാർക്കി (ഫിസിക്കൽ സ്ട്രക്ച്ചർ) എന്നിവ തമ്മിലുള്ള അടിസ്ഥാനപരമായ വ്യത്യാസമാണ്. റിയാക്ട് കമ്പോണന്റുകളുടെ ബഹുഭൂരിപക്ഷത്തിനും, ഈ രണ്ട് ഹൈറാർക്കികളും തികച്ചും യോജിച്ചതാണ്. റിയാക്ടിൽ നിർവചിക്കപ്പെട്ട ഒരു ചൈൽഡ് കമ്പോണന്റ് അതിന്റെ അനുബന്ധ ഡോം എലമെന്റുകളെ അതിന്റെ പാരന്റിന്റെ ഡോം എലമെന്റുകളുടെ ചൈൽഡ് ആയി റെൻഡർ ചെയ്യുന്നു.

പോർട്ടലുകൾ ഉപയോഗിക്കുമ്പോൾ, ഈ യോജിപ്പ് തകരുന്നു:

• ലോജിക്കൽ ഹൈറാർക്കി (റിയാക്ട് ട്രീ): ഒരു പോർട്ടൽ വഴി റെൻഡർ ചെയ്യപ്പെടുന്ന ഒരു കമ്പോണന്റ് അതിനെ റെൻഡർ ചെയ്ത കമ്പോണന്റിന്റെ ഒരു ചൈൽഡ് ആയി കണക്കാക്കപ്പെടുന്നു. ഈ ലോജിക്കൽ പാരന്റ്-ചൈൽഡ് ബന്ധം കോൺടെക്സ്റ്റ് പ്രൊപ്പഗേഷൻ, സ്റ്റേറ്റ് മാനേജ്മെന്റ് (ഉദാഹരണത്തിന്, `useState`, `useReducer`), എന്നിവയ്ക്കും, ഏറ്റവും പ്രധാനമായി, റിയാക്ട് അതിന്റെ സിന്തറ്റിക് ഇവന്റ് സിസ്റ്റം എങ്ങനെ കൈകാര്യം ചെയ്യുന്നു എന്നതിനും നിർണായകമാണ്.
• ഫിസിക്കൽ ഹൈറാർക്കി (ഡോം ട്രീ): ഒരു പോർട്ടൽ സൃഷ്ടിക്കുന്ന ഡോം എലമെന്റുകൾ ഡോം ട്രീയുടെ തികച്ചും വ്യത്യസ്തമായ ഒരു ഭാഗത്ത് നിലനിൽക്കുന്നു. അവ അവയുടെ ലോജിക്കൽ പാരന്റിന്റെ ഡോം എലമെന്റുകളുടെ സഹോദരങ്ങളോ അല്ലെങ്കിൽ വിദൂര ബന്ധുക്കളോ ആണ്, അവയുടെ യഥാർത്ഥ റെൻഡറിംഗ് ലൊക്കേഷനിൽ നിന്ന് വളരെ അകലെയാകാം.

ഈ വേർപിരിയലാണ് പോർട്ടലുകളുടെ അപാരമായ ശക്തിയുടെയും (മുമ്പ് ബുദ്ധിമുട്ടുള്ള യുഐ ലേഔട്ടുകൾ സാധ്യമാക്കുന്നു) ഇവന്റ് കൈകാര്യം ചെയ്യുന്നതിനെക്കുറിച്ചുള്ള പ്രാരംഭ ആശയക്കുഴപ്പത്തിന്റെയും ഉറവിടം. ഡോം ഘടന വ്യത്യസ്തമാണെങ്കിൽ, അതിന്റെ ഫിസിക്കൽ ഡോം പാരന്റ് അല്ലാത്ത ഒരു ലോജിക്കൽ പാരന്റിലേക്ക് ഇവന്റുകൾക്ക് എങ്ങനെ പ്രൊപ്പഗേറ്റ് ചെയ്യാൻ കഴിയും?

പോർട്ടലുകളിലെ ഇവന്റ് പ്രൊപ്പഗേഷൻ: "ടണലിംഗ്" മെക്കാനിസം വിശദീകരിക്കുന്നു

ഇവിടെയാണ് റിയാക്ടിന്റെ സിന്തറ്റിക് ഇവന്റ് സിസ്റ്റത്തിന്റെ ചാരുതയും ദീർഘവീക്ഷണവും ശരിക്കും തിളങ്ങുന്നത്. ഡോമിലെ അവയുടെ ഫിസിക്കൽ സ്ഥാനത്തെ പരിഗണിക്കാതെ, ഒരു പോർട്ടലിനുള്ളിൽ റെൻഡർ ചെയ്യപ്പെടുന്ന കമ്പോണന്റുകളിൽ നിന്നുള്ള ഇവന്റുകൾ റിയാക്ട് കമ്പോണന്റ് ട്രീയിലൂടെ പ്രൊപ്പഗേറ്റ് ചെയ്യുന്നുവെന്ന് റിയാക്ട് ഉറപ്പാക്കുന്നു, ഇത് ലോജിക്കൽ ഹൈറാർക്കി നിലനിർത്തുന്നു. ഈ ബുദ്ധിപരമായ പ്രക്രിയയെയാണ് ഞങ്ങൾ "ഇവന്റ് ടണലിംഗ്" എന്ന് വിളിക്കുന്നത്.

ഒരു പോർട്ടലിനുള്ളിലെ ഒരു ബട്ടണിൽ നിന്ന് ഉത്ഭവിക്കുന്ന ഒരു ഇവന്റ് സങ്കൽപ്പിക്കുക. ഇവന്റുകളുടെ ക്രമം ഇതാ, ആശയപരമായി:

1. നേറ്റീവ് ഡോം ഇവന്റ് ട്രിഗറുകൾ: ക്ലിക്ക് ആദ്യം ബട്ടണിൽ അതിന്റെ യഥാർത്ഥ ഡോം ലൊക്കേഷനിൽ (ഉദാഹരണത്തിന്, #modal-root div-നുള്ളിൽ) ഒരു നേറ്റീവ് ബ്രൗസർ ഇവന്റ് ട്രിഗർ ചെയ്യുന്നു.
2. നേറ്റീവ് ഇവന്റ് ഡോക്യുമെന്റ് റൂട്ടിലേക്ക് ബബിൾ ചെയ്യുന്നു: ഈ നേറ്റീവ് ഇവന്റ് പിന്നീട് യഥാർത്ഥ ഡോം ഹൈറാർക്കിയിലൂടെ മുകളിലേക്ക് ബബിൾ ചെയ്യുന്നു (ബട്ടണിൽ നിന്ന്, #modal-root വഴി, `document.body`-യിലേക്ക്, ഒടുവിൽ `document` റൂട്ടിലേക്ക് തന്നെ). ഇത് സാധാരണ ബ്രൗസർ പെരുമാറ്റമാണ്.
3. റിയാക്ടിന്റെ ഡെലിഗേറ്റഡ് ലിസണർ പിടിച്ചെടുക്കുന്നു: റിയാക്ടിന്റെ ഡെലിഗേറ്റഡ് ഇവന്റ് ലിസണർ (സാധാരണയായി `document` തലത്തിൽ അറ്റാച്ച് ചെയ്തിരിക്കുന്നത്) ഈ നേറ്റീവ് ഇവന്റ് പിടിച്ചെടുക്കുന്നു.
4. റിയാക്ട് സിന്തറ്റിക് ഇവന്റ് ഡിസ്പാച്ച് ചെയ്യുന്നു - ലോജിക്കൽ ക്യാപ്‌ചറിംഗ്/ടണലിംഗ് ഘട്ടം: ഫിസിക്കൽ ഡോം ടാർഗെറ്റിൽ ഉടൻ തന്നെ ഇവന്റ് പ്രോസസ്സ് ചെയ്യുന്നതിനുപകരം, റിയാക്ടിന്റെ ഇവന്റ് സിസ്റ്റം ആദ്യം *റിയാക്ട് ആപ്ലിക്കേഷന്റെ റൂട്ടിൽ നിന്ന് പോർട്ടൽ റെൻഡർ ചെയ്ത കമ്പോണന്റിലേക്കുള്ള* ലോജിക്കൽ പാത തിരിച്ചറിയുന്നു. തുടർന്ന് അത് ഈ ലോജിക്കൽ ട്രീയിലെ എല്ലാ ഇടനില റിയാക്ട് കമ്പോണന്റുകളിലൂടെയും ക്യാപ്‌ചറിംഗ് ഘട്ടം (താഴേക്ക് ടണൽ ചെയ്യുന്നു) സിമുലേറ്റ് ചെയ്യുന്നു. അവയുടെ അനുബന്ധ ഡോം എലമെന്റുകൾ പോർട്ടലിന്റെ ഫിസിക്കൽ ഡോം ലൊക്കേഷന്റെ നേരിട്ടുള്ള പാരന്റുകൾ അല്ലെങ്കിൽ പോലും ഇത് സംഭവിക്കുന്നു. ഈ ലോജിക്കൽ പാരന്റുകളിലെ ഏതൊരു `onClickCapture` അല്ലെങ്കിൽ സമാനമായ ക്യാപ്‌ചറിംഗ് ഹാൻഡ്‌ലറുകളും അവയുടെ പ്രതീക്ഷിക്കുന്ന ക്രമത്തിൽ പ്രവർത്തിക്കും. ഫിസിക്കൽ കേബിളുകൾ എവിടെ സ്ഥാപിച്ചിരിക്കുന്നു എന്നത് പരിഗണിക്കാതെ, മുൻകൂട്ടി നിശ്ചയിച്ച ഒരു ലോജിക്കൽ നെറ്റ്‌വർക്ക് പാതയിലൂടെ ഒരു സന്ദേശം അയയ്‌ക്കുന്നത് പോലെ ഇതിനെ കരുതുക.
5. ടാർഗെറ്റ് ഇവന്റ് ഹാൻഡ്‌ലർ പ്രവർത്തിക്കുന്നു: ഇവന്റ് പോർട്ടലിനുള്ളിലെ അതിന്റെ യഥാർത്ഥ ടാർഗെറ്റ് കമ്പോണന്റിൽ എത്തുന്നു, അതിന്റെ നിർദ്ദിഷ്ട ഹാൻഡ്‌ലർ (ഉദാഹരണത്തിന്, ബട്ടണിലെ `onClick`) പ്രവർത്തിക്കുന്നു.
6. റിയാക്ട് സിന്തറ്റിക് ഇവന്റ് ഡിസ്പാച്ച് ചെയ്യുന്നു - ലോജിക്കൽ ബബ്ലിംഗ് ഘട്ടം: ടാർഗെറ്റ് ഹാൻഡ്‌ലറിന് ശേഷം, ഇവന്റ് ലോജിക്കൽ റിയാക്ട് കമ്പോണന്റ് ട്രീയിലൂടെ മുകളിലേക്ക് പ്രൊപ്പഗേറ്റ് ചെയ്യുന്നു, പോർട്ടലിനുള്ളിൽ റെൻഡർ ചെയ്ത കമ്പോണന്റിൽ നിന്ന്, പോർട്ടലിന്റെ പാരന്റിലൂടെ, റിയാക്ട് ആപ്ലിക്കേഷന്റെ റൂട്ടിലേക്ക് മുകളിലേക്ക്. ഈ ലോജിക്കൽ പാരന്റുകളിലെ `onClick` പോലുള്ള സ്റ്റാൻഡേർഡ് ബബ്ലിംഗ് ലിസണറുകൾ പ്രവർത്തിക്കും.

ചുരുക്കത്തിൽ, റിയാക്ടിന്റെ ഇവന്റ് സിസ്റ്റം അതിന്റെ സിന്തറ്റിക് ഇവന്റുകൾക്കായി ഫിസിക്കൽ ഡോം പൊരുത്തക്കേടുകളെ സമർത്ഥമായി മറച്ചുവെക്കുന്നു. ഇവന്റ് പ്രൊപ്പഗേഷൻ ആവശ്യങ്ങൾക്കായി, പാരന്റിന്റെ ഡോം സബ്ട്രീക്കുള്ളിൽ അതിന്റെ ചൈൽഡ് കമ്പോണന്റുകൾ നേരിട്ട് റെൻഡർ ചെയ്തതുപോലെയാണ് ഇത് പോർട്ടലിനെ പരിഗണിക്കുന്നത്. ഇവന്റ് ലോജിക്കൽ റിയാക്ട് ഹൈറാർക്കിയിലൂടെ "ടണൽ" ചെയ്യുന്നു, ഈ മെക്കാനിസം മനസ്സിലാക്കിക്കഴിഞ്ഞാൽ പോർട്ടലുകളുമായുള്ള ഇവന്റ് കൈകാര്യം ചെയ്യുന്നത് അതിശയകരമാംവിധം എളുപ്പമാക്കുന്നു.

ടണലിംഗിന്റെ ഒരു ഉദാഹരണം:

ഇവന്റ് ഫ്ലോ നിരീക്ഷിക്കുന്നതിനായി കൂടുതൽ വ്യക്തമായ ലോഗിംഗോടെ നമ്മുടെ മുൻ ഉദാഹരണം വീണ്ടും പരിശോധിക്കാം:

            
// App.js
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [showModal, setShowModal] = React.useState(false);

  // These handlers are on the logical parent of the Modal
  const handleAppDivClickCapture = () => console.log('1. App div clicked (CAPTURE)!');
  const handleAppDivClick = () => console.log('5. App div clicked (BUBBLE)!');

  return (
    <div style={{ border: '2px solid red', padding: '20px' }}
         onClickCapture={handleAppDivClickCapture} <!-- Fires during tunneling down -->
         onClick={handleAppDivClick}>               <!-- Fires during bubbling up -->
      <h1>Main Application</h1>
      <button onClick={() => setShowModal(true)}>Show Modal</button>
      {showModal && <Modal onClose={() => setShowModal(false)} />}
    </div>
  );
}

function Modal({ onClose }) {
  const handleModalOverlayClickCapture = () => console.log('2. Modal overlay clicked (CAPTURE)!');
  const handleModalOverlayClick = () => console.log('4. Modal overlay clicked (BUBBLE)!');

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}
         onClickCapture={handleModalOverlayClickCapture} <!-- Fires during tunneling into Portal -->
         onClick={handleModalOverlayClick}>
      <div style={{ backgroundColor: 'white', padding: '30px', borderRadius: '8px' }}>
        <h2>Hello from a Portal!</h2>
        <p>Click the button below.</p>
        <button onClick={() => { console.log('3. Close Modal button clicked (TARGET)!'); onClose(); }}>Close Modal</button>
      </div>
    </div>,
    document.getElementById('modal-root')
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

            

              
                Copy
              
            
          

നിങ്ങൾ "Close Modal" ബട്ടൺ ക്ലിക്കുചെയ്യുകയാണെങ്കിൽ, പ്രതീക്ഷിക്കുന്ന കൺസോൾ ഔട്ട്പുട്ട് ഇതായിരിക്കും:

1. 1. App div clicked (CAPTURE)! (ലോജിക്കൽ പാരന്റിലൂടെ ഇവന്റ് താഴേക്ക് ടണൽ ചെയ്യുമ്പോൾ പ്രവർത്തിക്കുന്നു)
2. 2. Modal overlay clicked (CAPTURE)! (പോർട്ടലിന്റെ റൂട്ടിലേക്ക് ഇവന്റ് താഴേക്ക് ടണൽ ചെയ്യുമ്പോൾ പ്രവർത്തിക്കുന്നു)
3. 3. Close Modal button clicked (TARGET)! (യഥാർത്ഥ ടാർഗെറ്റിന്റെ ഹാൻഡ്‌ലർ)
4. 4. Modal overlay clicked (BUBBLE)! (പോർട്ടലിന്റെ റൂട്ടിൽ നിന്ന് ഇവന്റ് മുകളിലേക്ക് ബബിൾ ചെയ്യുമ്പോൾ പ്രവർത്തിക്കുന്നു)
5. 5. App div clicked (BUBBLE)! (ലോജിക്കൽ പാരന്റിലേക്ക് ഇവന്റ് മുകളിലേക്ക് ബബിൾ ചെയ്യുമ്പോൾ പ്രവർത്തിക്കുന്നു)

"Modal overlay" ഫിസിക്കലായി #modal-root-ലും "App div" #root-ലും റെൻഡർ ചെയ്തിട്ടുണ്ടെങ്കിലും, റിയാക്ടിന്റെ ഇവന്റ് സിസ്റ്റം ഇവന്റ് പ്രൊപ്പഗേഷൻ ആവശ്യങ്ങൾക്കായി "Modal" ഡോമിൽ "App"-ന്റെ നേരിട്ടുള്ള ഒരു ചൈൽഡ് ആയിരുന്നെങ്കിൽ എന്നപോലെ അവയെ പരസ്പരം പ്രവർത്തിപ്പിക്കുന്നു എന്ന് ഈ ക്രമം വ്യക്തമായി കാണിക്കുന്നു. ഈ സ്ഥിരത റിയാക്ടിന്റെ ഇവന്റ് മോഡലിന്റെ ഒരു അടിസ്ഥാന ശിലയാണ്.

ഇവന്റ് ക്യാപ്‌ചറിംഗിലേക്ക് ഒരു ആഴത്തിലുള്ള பார்வை (യഥാർത്ഥ ടണലിംഗ് ഘട്ടം)

പോർട്ടൽ ഇവന്റ് പ്രൊപ്പഗേഷൻ മനസ്സിലാക്കുന്നതിന് ക്യാപ്‌ചറിംഗ് ഘട്ടം പ്രത്യേകിച്ചും പ്രസക്തവും ശക്തവുമാണ്. ഒരു പോർട്ടൽ-റെൻഡർ ചെയ്ത എലമെന്റിൽ ഒരു ഇവന്റ് സംഭവിക്കുമ്പോൾ, റിയാക്ടിന്റെ സിന്തറ്റിക് ഇവന്റ് സിസ്റ്റം ഇവന്റ് ഫ്ലോ ആവശ്യങ്ങൾക്കായി പോർട്ടലിന്റെ ഉള്ളടക്കം അതിന്റെ ലോജിക്കൽ പാരന്റിനുള്ളിൽ ആഴത്തിൽ നെസ്റ്റ് ചെയ്തതാണെന്ന് ഫലപ്രദമായി "ഭാവിക്കുന്നു". അതിനാൽ, ക്യാപ്‌ചറിംഗ് ഘട്ടം റിയാക്ട് കമ്പോണന്റ് ട്രീയിലൂടെ റൂട്ടിൽ നിന്ന്, പോർട്ടലിന്റെ ലോജിക്കൽ പാരന്റിലൂടെ (createPortal വിളിച്ച കമ്പോണന്റ്), തുടർന്ന് പോർട്ടലിന്റെ ഉള്ളടക്കത്തിലേക്ക് സഞ്ചരിക്കും.

ഈ "താഴേക്കുള്ള ടണലിംഗ്" വശം അർത്ഥമാക്കുന്നത് ഒരു പോർട്ടലിന്റെ ഏതൊരു ലോജിക്കൽ പാരന്റിനും ഒരു ഇവന്റ് പോർട്ടലിന്റെ ഉള്ളടക്കത്തിൽ എത്തുന്നതിന് *മുമ്പ്* അതിനെ തടസ്സപ്പെടുത്താൻ കഴിയുമെന്നാണ്. ഇത് പോലുള്ള ഫീച്ചറുകൾ നടപ്പിലാക്കുന്നതിനുള്ള ഒരു നിർണായക കഴിവാണ്:

• ഗ്ലോബൽ ഹോട്ട്‌കീകൾ/ഷോർട്ട്‌കട്ടുകൾ: ഒരു ഹയർ-ഓർഡർ കമ്പോണന്റ് അല്ലെങ്കിൽ ഒരു `document` തലത്തിലുള്ള ലിസണർ (റിയാക്ടിന്റെ `useEffect`-ൽ `onClickCapture` ഉപയോഗിച്ച്) ആഴത്തിൽ നെസ്റ്റ് ചെയ്ത ഒരു പോർട്ടൽ കൈകാര്യം ചെയ്യുന്നതിന് മുമ്പ് കീബോർഡ് ഇവന്റുകളോ ക്ലിക്കുകളോ കണ്ടെത്താൻ കഴിയും, ഇത് ഗ്ലോബൽ ആപ്ലിക്കേഷൻ നിയന്ത്രണം അനുവദിക്കുന്നു.
• ഓവർലേ മാനേജ്മെന്റ്: പോർട്ടലിനെ (ലോജിക്കലായി) പൊതിയുന്ന ഒരു കമ്പോണന്റ്, പോർട്ടലിന്റെ ഫിസിക്കൽ ഡോം ലൊക്കേഷൻ പരിഗണിക്കാതെ, അതിന്റെ ലോജിക്കൽ സ്പേസിലൂടെ കടന്നുപോകുന്ന ഏതൊരു ക്ലിക്കും കണ്ടെത്താൻ `onClickCapture` ഉപയോഗിക്കാം, ഇത് സങ്കീർണ്ണമായ ഓവർലേ ഡിസ്മിസൽ ലോജിക്ക് സാധ്യമാക്കുന്നു.
• ഇന്ററാക്ഷൻ തടയൽ: അപൂർവ സന്ദർഭങ്ങളിൽ, ഒരു പാരന്റിന് ഒരു ഇവന്റ് പോർട്ടലിന്റെ ഉള്ളടക്കത്തിൽ എത്തുന്നതിൽ നിന്ന് തടയേണ്ടിവന്നേക്കാം, ഒരുപക്ഷേ ഒരു താൽക്കാലിക യുഐ ലോക്കിന്റെ ഭാഗമായി അല്ലെങ്കിൽ ഒരു കണ്ടീഷണൽ ഇന്ററാക്ഷൻ ലെയറിന്റെ ഭാഗമായി.

ഒരു `document.body` ക്ലിക്ക് ഹാൻഡ്‌ലറും ഒരു പോർട്ടലിന്റെ ലോജിക്കൽ പാരന്റിലെ ഒരു റിയാക്ട് `onClickCapture`-ഉം തമ്മിൽ പരിഗണിക്കുക:

            
// App.js
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [showNotification, setShowNotification] = React.useState(false);

  React.useEffect(() => {
    // Native document click listener: respects physical DOM hierarchy
    const handleNativeDocumentClick = () => {
      console.log('--- NATIVE: Document click detected. (Fires first, based on DOM position) ---');
    };
    document.addEventListener('click', handleNativeDocumentClick);
    return () => document.removeEventListener('click', handleNativeDocumentClick);
  }, []);

  const handleAppDivClickCapture = () => console.log('1. APP: CAPTURE event (React Synthetic - logical parent)');

  return (
    <div onClickCapture={handleAppDivClickCapture}>
      <h2>Main App</h2>
      <button onClick={() => setShowNotification(true)}>Show Notification</button>
      {showNotification && <Notification />}
    </div>
  );
}

function Notification() {
  const handleNotificationDivClickCapture = () => console.log('2. NOTIFICATION: CAPTURE event (React Synthetic - Portal root)');

  return ReactDOM.createPortal(
    <div style={{ border: '1px solid blue', padding: '10px' }}
         onClickCapture={handleNotificationDivClickCapture}>
      <p>A message from a Portal.</p>
      <button onClick={() => console.log('3. NOTIFICATION BUTTON: Clicked (TARGET)!')}>OK</button>
    </div>,
    document.getElementById('notification-root') // Another root in index.html, e.g., <div id="notification-root"></div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

            

              
                Copy
              
            
          

നിങ്ങൾ Notification പോർട്ടലിനുള്ളിലെ "OK" ബട്ടൺ ക്ലിക്കുചെയ്യുകയാണെങ്കിൽ, കൺസോൾ ഔട്ട്പുട്ട് ഇങ്ങനെയായിരിക്കാം:

1. --- NATIVE: Document click detected. (Fires first, based on DOM position) --- (`document.addEventListener`-ൽ നിന്നാണ് ഇത് പ്രവർത്തിക്കുന്നത്, ഇത് നേറ്റീവ് ഡോമിനെ മാനിക്കുന്നു, അതിനാൽ ഇത് ബ്രൗസർ ആദ്യം പ്രോസസ്സ് ചെയ്യുന്നു.)
2. 1. APP: CAPTURE event (React Synthetic - logical parent) (റിയാക്ടിന്റെ സിന്തറ്റിക് ഇവന്റ് സിസ്റ്റം അതിന്റെ ലോജിക്കൽ ടണലിംഗ് പാത App കമ്പോണന്റിൽ നിന്ന് ആരംഭിക്കുന്നു.)
3. 2. NOTIFICATION: CAPTURE event (React Synthetic - Portal root) (ടണലിംഗ് പോർട്ടലിന്റെ ഉള്ളടക്കത്തിന്റെ റൂട്ടിലേക്ക് തുടരുന്നു.)
4. 3. NOTIFICATION BUTTON: Clicked (TARGET)! (ടാർഗെറ്റ് എലമെന്റിന്റെ `onClick` ഹാൻഡ്‌ലർ പ്രവർത്തിക്കുന്നു.)
5. (Notification div-ലോ App div-ലോ ബബ്ലിംഗ് ഹാൻഡ്‌ലറുകൾ ഉണ്ടായിരുന്നെങ്കിൽ, അവ അടുത്തതായി വിപരീത ക്രമത്തിൽ പ്രവർത്തിക്കുമായിരുന്നു.)

റിയാക്ടിന്റെ ഇവന്റ് സിസ്റ്റം ക്യാപ്‌ചറിംഗ്, ബബ്ലിംഗ് ഘട്ടങ്ങൾക്ക് ലോജിക്കൽ കമ്പോണന്റ് ഹൈറാർക്കിക്ക് മുൻഗണന നൽകുന്നുവെന്ന് ഈ ക്രമം വ്യക്തമായി കാണിക്കുന്നു, ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷനിലുടനീളം സ്ഥിരതയുള്ള ഒരു ഇവന്റ് മോഡൽ നൽകുന്നു, ഇത് റോ നേറ്റീവ് ഡോം ഇവന്റുകളിൽ നിന്ന് വ്യത്യസ്തമാണ്. ഈ പരസ്പരബന്ധം മനസ്സിലാക്കുന്നത് ഡീബഗ്ഗിംഗിനും കരുത്തുറ്റ ഇവന്റ് ഫ്ലോകൾ രൂപകൽപ്പന ചെയ്യുന്നതിനും അത്യന്താപേക്ഷിതമാണ്.

പ്രായോഗിക സാഹചര്യങ്ങളും പ്രവർത്തനക്ഷമമായ ഉൾക്കാഴ്ചകളും

സാഹചര്യം 1: മോഡലുകൾക്കായുള്ള ഗ്ലോബൽ ക്ലിക്ക്-ഔട്ട്‌സൈഡ് ലോജിക്ക്

മോഡലുകൾക്കുള്ള ഒരു സാധാരണ ആവശ്യം, എല്ലാ സംസ്കാരങ്ങളിലും പ്രദേശങ്ങളിലും നല്ലൊരു ഉപയോക്തൃ അനുഭവത്തിന് നിർണായകമാണ്, ഉപയോക്താവ് മോഡലിന്റെ പ്രധാന ഉള്ളടക്ക ഏരിയയ്ക്ക് പുറത്ത് എവിടെയെങ്കിലും ക്ലിക്കുചെയ്യുമ്പോൾ അവ അടയ്ക്കുക എന്നതാണ്. പോർട്ടൽ ഇവന്റ് ടണലിംഗ് മനസ്സിലാക്കാതെ, ഇത് ബുദ്ധിമുട്ടുള്ള കാര്യമാണ്. ഒരു കരുത്തുറ്റ, "റിയാക്ട്-ഇഡിയോമാറ്റിക്" രീതി ഇവന്റ് ടണലിംഗും `stopPropagation()`-ഉം ഉപയോഗിക്കുന്നു.

            
function AppWithModal() {
  const [isOpen, setIsOpen] = React.useState(false);
  const modalRef = React.useRef(null);

  // This handler will fire for any click *logically* within the App,
  // including clicks that tunnel up from the Modal, if not stopped.
  const handleAppClick = () => {
    console.log('App received a click (BUBBLE).');
    // If a click outside modal content but on the overlay should close the modal,
    // and that overlay's onClick handler closes the modal, then this App handler
    // might only fire if the event bubbles past the overlay or if the modal is not open.
  };

  const handleCloseModal = () => setIsOpen(false);

  return (
    <div onClick={handleAppClick}>
      <h2>App Content</h2>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && <ClickOutsideModal onClose={handleCloseModal} />}
    </div>
  );
}

function ClickOutsideModal({ onClose }) {
  // This outer div of the portal acts as the semi-transparent overlay.
  // Its onClick handler will close the modal ONLY if the click has bubbled up to it,
  // meaning it did NOT originate from the inner modal content AND was not stopped.
  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
      backgroundColor: 'rgba(0,0,0,0.6)',
      display: 'flex', alignItems: 'center', justifyContent: 'center'
    }}
    onClick={onClose} > <!-- This handler will close the modal if clicked outside inner content -->
      <div style={{
        backgroundColor: 'white', padding: '25px', borderRadius: '10px',
        minWidth: '300px', maxWidth: '80%'
      }}
      // Crucially, stop propagation here to prevent the click from bubbling up
      // to the overlay's onClick handler, and thus to App's onClick handler.
      onClick={(e) => e.stopPropagation()} >
        <h3>Click Me Or Outside!</h3>
        <p>Click anywhere outside this white box to close the modal.</p>
        <button onClick={onClose}>Close with Button</button>
      </div>
    </div>,
    document.getElementById('modal-root')
  );
}

            

              
                Copy
              
            
          

ഈ കരുത്തുറ്റ ഉദാഹരണത്തിൽ: ഒരു ഉപയോക്താവ് വെളുത്ത മോഡൽ ഉള്ളടക്ക ബോക്സിനുള്ളിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, ഇന്നർ `div`-ലെ `e.stopPropagation()` ആ സിന്തറ്റിക് ക്ലിക്ക് ഇവന്റ് സെമി-ട്രാൻസ്പരന്റ് ഓവർലേയുടെ `onClick={onClose}` ഹാൻഡ്‌ലറിലേക്ക് ബബിൾ ചെയ്യുന്നത് തടയുന്നു. റിയാക്ടിന്റെ ടണലിംഗ് കാരണം, ഇത് ഇവന്റ് `AppWithModal`-ന്റെ `onClick={handleAppClick}`-ലേക്ക് കൂടുതൽ ബബിൾ ചെയ്യുന്നതും തടയുന്നു. ഉപയോക്താവ് വെളുത്ത ഉള്ളടക്ക ബോക്സിന് പുറത്ത് എന്നാൽ സെമി-ട്രാൻസ്പരന്റ് ഓവർലേയിൽ ക്ലിക്കുചെയ്യുകയാണെങ്കിൽ, ഓവർലേയുടെ `onClick={onClose}` ഹാൻഡ്‌ലർ പ്രവർത്തിക്കുകയും മോഡൽ അടയ്ക്കുകയും ചെയ്യും. ഈ പാറ്റേൺ ഉപയോക്താക്കൾക്ക് അവരുടെ പ്രാവീണ്യമോ ഇന്ററാക്ഷൻ ശീലങ്ങളോ പരിഗണിക്കാതെ അവബോധജന്യമായ പെരുമാറ്റം ഉറപ്പാക്കുന്നു.

സാഹചര്യം 2: പോർട്ടൽ ഇവന്റുകൾക്കായി പാരന്റ് ഹാൻഡ്‌ലറുകൾ പ്രവർത്തിക്കുന്നത് തടയുന്നു

ചിലപ്പോൾ നിങ്ങൾക്ക് ഒരു പാരന്റ് കമ്പോണന്റിൽ ഒരു ഗ്ലോബൽ ഇവന്റ് ലിസണർ (ഉദാഹരണത്തിന്, ലോഗിംഗ്, അനലിറ്റിക്സ്, അല്ലെങ്കിൽ ആപ്ലിക്കേഷൻ-വൈഡ് കീബോർഡ് ഷോർട്ട്‌കട്ടുകൾക്കായി) ഉണ്ടായിരിക്കും, കൂടാതെ ഒരു പോർട്ടൽ ചൈൽഡിൽ നിന്ന് ഉത്ഭവിക്കുന്ന ഇവന്റുകൾ അത് ട്രിഗർ ചെയ്യുന്നത് തടയാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു. ഇവിടെയാണ് വൃത്തിയുള്ളതും പ്രവചിക്കാവുന്നതുമായ ഇവന്റ് ഫ്ലോകൾക്കായി പോർട്ടലിന്റെ ഉള്ളടക്കത്തിനുള്ളിൽ `e.stopPropagation()`-ന്റെ വിവേകപൂർണ്ണമായ ഉപയോഗം അത്യന്താപേക്ഷിതമാകുന്നത്.

            
function AnalyticsApp() {
  const [showPanel, setShowPanel] = React.useState(false);

  const handleGlobalClick = () => {
    console.log('AnalyticsApp: Click detected anywhere in the main app (for analytics/logging).');
  };

  return (
    <div onClick={handleGlobalClick}> <!-- This will log all clicks that bubble up to it -->
      <h2>Main App with Analytics</h2>
      <button onClick={() => setShowPanel(true)}>Open Action Panel</button>
      {showPanel && <ActionPanel onClose={() => setShowPanel(false)} />}
    </div>
  );
}

function ActionPanel({ onClose }) {
  // This Portal renders into a separate DOM node (e.g., <div id="panel-root">).
  // We want clicks *inside* this panel to NOT trigger AnalyticsApp's global handler.
  return ReactDOM.createPortal(
    <div style={{ border: '1px solid darkgreen', padding: '15px', backgroundColor: '#f0f0f0' }}
         onClick={(e) => e.stopPropagation()} > <!-- Crucial for stopping logical propagation -->
      <h3>Perform Action</h3>
      <p>This interaction should be isolated.</p>
      <button onClick={() => { console.log('Action performed!'); onClose(); }}>Submit</button>
      <button onClick={onClose}>Cancel</button>
    </div>,
    document.getElementById('panel-root')
  );
}

            

              
                Copy
              
            
          

`ActionPanel`-ന്റെ പോർട്ടൽ ഉള്ളടക്കത്തിന്റെ ഏറ്റവും പുറത്തുള്ള `div`-ൽ `onClick={(e) => e.stopPropagation()}` സ്ഥാപിക്കുന്നതിലൂടെ, പാനലിനുള്ളിൽ ഉത്ഭവിക്കുന്ന ഏതൊരു സിന്തറ്റിക് ക്ലിക്ക് ഇവന്റിന്റെയും പ്രൊപ്പഗേഷൻ ആ ഘട്ടത്തിൽ നിർത്തപ്പെടും. ഇത് `AnalyticsApp`-ന്റെ `handleGlobalClick`-ലേക്ക് ടണൽ ചെയ്യില്ല, അതുവഴി നിങ്ങളുടെ അനലിറ്റിക്സ് അല്ലെങ്കിൽ മറ്റ് ഗ്ലോബൽ ഹാൻഡ്‌ലറുകളെ പോർട്ടൽ-നിർദ്ദിഷ്ട ഇന്ററാക്ഷനുകളിൽ നിന്ന് വൃത്തിയായി സൂക്ഷിക്കുന്നു. ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷനിൽ ഏതൊക്കെ ഇവന്റുകൾ ഏതൊക്കെ ലോജിക്കൽ പ്രവർത്തനങ്ങളെ ട്രിഗർ ചെയ്യുന്നു എന്നതിൽ കൃത്യമായ നിയന്ത്രണം അനുവദിക്കുന്നു.

സാഹചര്യം 3: പോർട്ടലുകളുമായുള്ള കോൺടെക്സ്റ്റ് API

ഓരോ തലത്തിലും പ്രോപ്പുകൾ താഴേക്ക് നേരിട്ട് കൈമാറാതെ കമ്പോണന്റ് ട്രീയിലൂടെ ഡാറ്റ കൈമാറാൻ കോൺടെക്സ്റ്റ് ഒരു ശക്തമായ മാർഗ്ഗം നൽകുന്നു. ഒരു സാധാരണ ആശങ്ക, പോർട്ടലുകളുടെ ഡോം വേർപിരിയൽ കണക്കിലെടുക്കുമ്പോൾ, കോൺടെക്സ്റ്റ് അവയിലുടനീളം പ്രവർത്തിക്കുമോ എന്നതാണ്. സന്തോഷവാർത്ത, അതെ, അത് പ്രവർത്തിക്കും! കാരണം പോർട്ടലുകൾ ഇപ്പോഴും ലോജിക്കൽ റിയാക്ട് കമ്പോണന്റ് ട്രീയുടെ ഭാഗമാണ്, അവയ്ക്ക് അവയുടെ ലോജിക്കൽ പാരന്റുകൾ നൽകുന്ന കോൺടെക്സ്റ്റ് ഉപയോഗിക്കാൻ കഴിയും, ഇത് റിയാക്ടിന്റെ ആന്തരിക മെക്കാനിസങ്ങൾ കമ്പോണന്റ് ട്രീക്ക് മുൻഗണന നൽകുന്നു എന്ന ആശയം ശക്തിപ്പെടുത്തുന്നു.

            
const ThemeContext = React.createContext('light');

function ThemedApp() {
  const [theme, setTheme] = React.useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <div style={{ padding: '20px', backgroundColor: theme === 'light' ? '#f8f8f8' : '#333', color: theme === 'light' ? '#333' : '#eee' }}>
        <h2>Themed Application ({theme} mode)</h2>
        <p>This app adapts to user preferences, a global design principle.</p>
        <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme</button>
        <ThemedPortalMessage />
      </div>
    </ThemeContext.Provider>
  );
}

function ThemedPortalMessage() {
  // This component, despite rendering in a Portal, still consumes context from its logical parent.
  const theme = React.useContext(ThemeContext);

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed', top: '20px', right: '20px', padding: '15px', borderRadius: '5px',
      backgroundColor: theme === 'light' ? 'lightblue' : 'darkblue',
      color: 'white',
      boxShadow: '0 2px 10px rgba(0,0,0,0.2)'
    }}>
      <p>This message is themed: <strong>{theme} mode</strong>.</p>
      <small>Rendered outside the main DOM tree, but within the logical React context.</small>
    </div>,
    document.getElementById('notification-root') // Assumes <div id="notification-root"></div> exists in index.html
  );
}

            

              
                Copy
              
            
          

ThemedPortalMessage #notification-root (ഒരു പ്രത്യേക ഡോം നോഡ്) ലേക്ക് റെൻഡർ ചെയ്യുന്നുണ്ടെങ്കിലും, അത് ThemedApp-ൽ നിന്ന് `theme` കോൺടെക്സ്റ്റ് വിജയകരമായി സ്വീകരിക്കുന്നു. ഇത് കോൺടെക്സ്റ്റ് പ്രൊപ്പഗേഷൻ ലോജിക്കൽ റിയാക്ട് ട്രീയെ പിന്തുടരുന്നുവെന്ന് കാണിക്കുന്നു, ഇത് ഇവന്റ് പ്രൊപ്പഗേഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെ പ്രതിഫലിപ്പിക്കുന്നു. ഈ സ്ഥിരത പോർട്ടലുകൾ ഉപയോഗിക്കുന്ന സങ്കീർണ്ണമായ യുഐ കമ്പോണന്റുകൾക്കുള്ള സ്റ്റേറ്റ് മാനേജ്മെന്റ് ലളിതമാക്കുന്നു.

സാഹചര്യം 4: നെസ്റ്റഡ് പോർട്ടലുകളിലെ ഇവന്റുകൾ കൈകാര്യം ചെയ്യൽ (അഡ്വാൻസ്ഡ്)

സാധാരണമല്ലെങ്കിലും, പോർട്ടലുകൾ നെസ്റ്റ് ചെയ്യാൻ സാധ്യമാണ്, അതായത് ഒരു പോർട്ടലിൽ റെൻഡർ ചെയ്ത ഒരു കമ്പോണന്റ് തന്നെ മറ്റൊരു പോർട്ടൽ റെൻഡർ ചെയ്യുന്നു. ഇവന്റ് ടണലിംഗ് മെക്കാനിസം അതേ തത്വങ്ങൾ വികസിപ്പിച്ചുകൊണ്ട് ഈ സങ്കീർണ്ണമായ സാഹചര്യങ്ങളെ ഭംഗിയായി കൈകാര്യം ചെയ്യുന്നു:

1. ഇവന്റ് ഏറ്റവും ആഴത്തിലുള്ള പോർട്ടലിന്റെ ഉള്ളടക്കത്തിൽ നിന്ന് ഉത്ഭവിക്കുന്നു.
2. അത് ആ ഏറ്റവും ആഴത്തിലുള്ള പോർട്ടലിനുള്ളിലെ റിയാക്ട് കമ്പോണന്റുകളിലൂടെ മുകളിലേക്ക് ബബിൾ ചെയ്യുന്നു.
3. തുടർന്ന് അത് ആ ഏറ്റവും ആഴത്തിലുള്ള പോർട്ടലിനെ *റെൻഡർ* ചെയ്ത കമ്പോണന്റിലേക്ക് ടണൽ ചെയ്യുന്നു.
4. അവിടെ നിന്ന്, അത് അടുത്ത ലോജിക്കൽ പാരന്റിലേക്ക് ബബിൾ ചെയ്യുന്നു, അത് മറ്റൊരു പോർട്ടലിന്റെ ഉള്ളടക്കമായിരിക്കാം.
5. ഇത് മുഴുവൻ റിയാക്ട് ആപ്ലിക്കേഷന്റെ റൂട്ടിൽ എത്തുന്നതുവരെ തുടരുന്നു.

പ്രധാന കാര്യം, ലോജിക്കൽ റിയാക്ട് കമ്പോണന്റ് ഹൈറാർക്കി ഇവന്റ് പ്രൊപ്പഗേഷന്റെ ഒരേയൊരു സത്യമായി നിലകൊള്ളുന്നു, പോർട്ടലുകൾ എത്ര ലെയർ ഡോം വേർപിരിയൽ അവതരിപ്പിച്ചാലും. ഈ പ്രവചനാത്മകത വളരെ മോഡുലാർ ആയതും വിപുലീകരിക്കാവുന്നതുമായ യുഐ സിസ്റ്റങ്ങൾ നിർമ്മിക്കുന്നതിന് പരമപ്രധാനമാണ്.

ഗ്ലോബൽ ആപ്ലിക്കേഷനുകൾക്കായുള്ള മികച്ച രീതികളും പരിഗണനകളും

• e.stopPropagation()-ന്റെ വിവേകപൂർണ്ണമായ ഉപയോഗം: ശക്തമാണെങ്കിലും, stopPropagation()-ന്റെ അമിതമായ ഉപയോഗം ദുർബലവും ഡീബഗ് ചെയ്യാൻ പ്രയാസമുള്ളതുമായ കോഡിലേക്ക് നയിച്ചേക്കാം. നിങ്ങളുടെ പോർട്ടൽ ഉള്ളടക്കത്തിന്റെ ഇന്ററാക്ഷനുകളെ വേർതിരിക്കുന്നതിന്, സാധാരണയായി അതിന്റെ റൂട്ടിൽ, നിർദ്ദിഷ്ട ഇവന്റുകൾ ലോജിക്കൽ ട്രീയിലൂടെ കൂടുതൽ പ്രൊപ്പഗേറ്റ് ചെയ്യുന്നത് തടയേണ്ടിടത്ത് കൃത്യമായി ഉപയോഗിക്കുക. നിങ്ങളുടെ കൃത്യമായ ആവശ്യകതയെ ആശ്രയിച്ച്, ഉറവിടത്തിൽ പ്രൊപ്പഗേഷൻ നിർത്തുന്നതിനുപകരം തടസ്സപ്പെടുത്തുന്നതിന് ഒരു പാരന്റിൽ `onClickCapture` ഉപയോഗിക്കുന്നത് മികച്ച സമീപനമാണോ എന്ന് പരിഗണിക്കുക.
• ആക്സസിബിലിറ്റി (A11y) പരമപ്രധാനമാണ്: പോർട്ടലുകൾ, പ്രത്യേകിച്ച് മോഡലുകൾക്കും ഡയലോഗുകൾക്കും, ഒരു ആഗോള, ഉൾക്കൊള്ളുന്ന ഉപയോക്തൃ അടിത്തറയ്ക്കായി അഭിസംബോധന ചെയ്യേണ്ട കാര്യമായ ആക്സസിബിലിറ്റി വെല്ലുവിളികൾ അവതരിപ്പിക്കുന്നു. ഇത് ഉറപ്പാക്കുക:
  • ഫോക്കസ് മാനേജ്മെന്റ്: ഒരു പോർട്ടൽ (ഒരു മോഡൽ പോലെ) തുറക്കുമ്പോൾ, ഫോക്കസ് പ്രോഗ്രാമാറ്റിക്കായി അതിനുള്ളിലേക്ക് നീക്കുകയും ട്രാപ്പ് ചെയ്യുകയും വേണം. കീബോർഡുകളോ അസിസ്റ്റീവ് സാങ്കേതികവിദ്യകളോ ഉപയോഗിച്ച് നാവിഗേറ്റ് ചെയ്യുന്ന ഉപയോക്താക്കൾ ഇത് പ്രതീക്ഷിക്കുന്നു. അത് അടയ്ക്കുമ്പോൾ ഫോക്കസ് പോർട്ടൽ തുറക്കാൻ കാരണമായ എലമെന്റിലേക്ക് തിരികെ നൽകണം. ഈ സങ്കീർണ്ണമായ പെരുമാറ്റം ബ്രൗസറുകളിലും ഉപകരണങ്ങളിലും വിശ്വസനീയമായി കൈകാര്യം ചെയ്യുന്നതിന് `react-focus-lock` അല്ലെങ്കിൽ `focus-trap-react` പോലുള്ള ലൈബ്രറികൾ വളരെ ശുപാർശ ചെയ്യുന്നു.
  • കീബോർഡ് നാവിഗേഷൻ: ഉപയോക്താക്കൾക്ക് കീബോർഡ് മാത്രം ഉപയോഗിച്ച് പോർട്ടലിനുള്ളിലെ എല്ലാ എലമെന്റുകളുമായും സംവദിക്കാൻ കഴിയുമെന്ന് ഉറപ്പാക്കുക (ഉദാഹരണത്തിന്, നാവിഗേഷനായി Tab, Shift+Tab, മോഡലുകൾ അടയ്ക്കുന്നതിന് Esc). മോട്ടോർ വൈകല്യങ്ങളുള്ള ഉപയോക്താക്കൾക്കോ അല്ലെങ്കിൽ കീബോർഡ് ഇന്ററാക്ഷൻ ഇഷ്ടപ്പെടുന്നവർക്കോ ഇത് അടിസ്ഥാനപരമാണ്.
  • ARIA റോളുകളും ആട്രിബ്യൂട്ടുകളും: ഉചിതമായ WAI-ARIA റോളുകളും ആട്രിബ്യൂട്ടുകളും ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, ഒരു മോഡലിന് സാധാരണയായി `role="dialog"` (അല്ലെങ്കിൽ `alertdialog`), `aria-modal="true"`, കൂടാതെ അതിന്റെ തലക്കെട്ടുമായും വിവരണവുമായും ബന്ധിപ്പിക്കുന്നതിന് `aria-labelledby` / `aria-describedby` എന്നിവ ഉണ്ടായിരിക്കണം. ഇത് സ്ക്രീൻ റീഡറുകൾക്കും മറ്റ് അസിസ്റ്റീവ് സാങ്കേതികവിദ്യകൾക്കും നിർണായകമായ സെമാന്റിക് വിവരങ്ങൾ നൽകുന്നു.
  • `inert` ആട്രിബ്യൂട്ട്: ആധുനിക ബ്രൗസറുകൾക്കായി, സജീവമായ മോഡൽ/പോർട്ടലിന് പുറത്തുള്ള എലമെന്റുകളിൽ `inert` ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുന്നത് പരിഗണിക്കുക, ഇത് പശ്ചാത്തല ഉള്ളടക്കവുമായുള്ള ഫോക്കസും ഇന്ററാക്ഷനും തടയുന്നു, അസിസ്റ്റീവ് സാങ്കേതികവിദ്യ ഉപയോക്താക്കൾക്കുള്ള ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നു.
• സ്ക്രോൾ ലോക്കിംഗ്: ഒരു മോഡലോ പൂർണ്ണ-സ്ക്രീൻ പോർട്ടലോ തുറക്കുമ്പോൾ, പശ്ചാത്തല ഉള്ളടക്കം സ്ക്രോൾ ചെയ്യുന്നത് തടയാൻ നിങ്ങൾ പലപ്പോഴും ആഗ്രഹിക്കുന്നു. ഇത് ഒരു സാധാരണ യുഎക്സ് പാറ്റേണാണ്, സാധാരണയായി `body` എലമെന്റിനെ `overflow: hidden` ഉപയോഗിച്ച് സ്റ്റൈൽ ചെയ്യുന്നത് ഉൾപ്പെടുന്നു. വിവിധ ഓപ്പറേറ്റിംഗ് സിസ്റ്റങ്ങളിലും ബ്രൗസറുകളിലും ഉണ്ടാകാനിടയുള്ള ലേഔട്ട് ഷിഫ്റ്റുകളോ സ്ക്രോൾബാർ അപ്രത്യക്ഷമാകുന്ന പ്രശ്നങ്ങളോ ശ്രദ്ധിക്കുക, ഇത് ആഗോളതലത്തിൽ ഉപയോക്താക്കളെ ബാധിച്ചേക്കാം. `body-scroll-lock` പോലുള്ള ലൈബ്രറികൾ സഹായിക്കും.
• സെർവർ-സൈഡ് റെൻഡറിംഗ് (SSR): നിങ്ങൾ SSR ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ പോർട്ടൽ കണ്ടെയ്നർ എലമെന്റുകൾ (ഉദാഹരണത്തിന്, `#modal-root`) നിങ്ങളുടെ പ്രാരംഭ HTML ഔട്ട്പുട്ടിൽ ഉണ്ടെന്ന് ഉറപ്പാക്കുക, അല്ലെങ്കിൽ അവയുടെ സൃഷ്ടി ക്ലയന്റ്-സൈഡിൽ കൈകാര്യം ചെയ്യുക, ഹൈഡ്രേഷൻ പൊരുത്തക്കേടുകൾ തടയുന്നതിനും സുഗമമായ ഒരു പ്രാരംഭ റെൻഡർ ഉറപ്പാക്കുന്നതിനും. പ്രകടനത്തിനും എസ്ഇഒയ്ക്കും ഇത് നിർണായകമാണ്, പ്രത്യേകിച്ചും വേഗത കുറഞ്ഞ ഇന്റർനെറ്റ് കണക്ഷനുകളുള്ള പ്രദേശങ്ങളിൽ.
• ടെസ്റ്റിംഗ് സ്ട്രാറ്റജികൾ: പോർട്ടലുകൾ ഉപയോഗിക്കുന്ന കമ്പോണന്റുകൾ ടെസ്റ്റ് ചെയ്യുമ്പോൾ, പോർട്ടൽ ഉള്ളടക്കം ഒരു വ്യത്യസ്ത ഡോം നോഡിലാണ് റെൻഡർ ചെയ്യുന്നതെന്ന് ഓർക്കുക. `@testing-library/react` പോലുള്ള ടൂളുകൾ സാധാരണയായി പോർട്ടൽ ഉള്ളടക്കത്തെ അതിന്റെ ആക്സസിബിൾ റോളോ ടെക്സ്റ്റ് ഉള്ളടക്കമോ ഉപയോഗിച്ച് കണ്ടെത്താൻ പര്യാപ്തമാണ്, എന്നാൽ ചിലപ്പോൾ അതിന്റെ സാന്നിധ്യമോ ഇന്ററാക്ഷനുകളോ ഉറപ്പിക്കാൻ `document.body`-യോ അല്ലെങ്കിൽ നിർദ്ദിഷ്ട പോർട്ടൽ കണ്ടെയ്നറോ നേരിട്ട് പരിശോധിക്കേണ്ടിവന്നേക്കാം. ഉപയോക്തൃ ഇന്ററാക്ഷനുകൾ സിമുലേറ്റ് ചെയ്യുകയും പ്രതീക്ഷിക്കുന്ന ഇവന്റ് ഫ്ലോ പരിശോധിക്കുകയും ചെയ്യുന്ന ടെസ്റ്റുകൾ എഴുതുക.

സാധാരണ അപകടങ്ങളും ട്രബിൾഷൂട്ടിംഗും

• ഡോം, റിയാക്ട് ഹൈറാർക്കി എന്നിവയെക്കുറിച്ചുള്ള ആശയക്കുഴപ്പം: ആവർത്തിച്ച് പറഞ്ഞതുപോലെ, ഇതാണ് ഏറ്റവും സാധാരണമായ അപകടം. റിയാക്ടിന്റെ സിന്തറ്റിക് ഇവന്റുകൾക്ക്, ഫിസിക്കൽ ഡോം ഘടനയല്ല, ലോജിക്കൽ റിയാക്ട് കമ്പോണന്റ് ട്രീയാണ് പ്രൊപ്പഗേഷൻ നിർണ്ണയിക്കുന്നത് എന്ന് എപ്പോഴും ഓർക്കുക. നിങ്ങളുടെ കമ്പോണന്റ് ട്രീ വരയ്ക്കുന്നത് ഇത് വ്യക്തമാക്കാൻ പലപ്പോഴും സഹായിക്കും.
• നേറ്റീവ് ഇവന്റ് ലിസണറുകൾ വേഴ്സസ് റിയാക്ട് സിന്തറ്റിക് ഇവന്റുകൾ: നേറ്റീവ് ഡോം ഇവന്റ് ലിസണറുകൾ (ഉദാഹരണത്തിന്, `document.addEventListener('click', handler)`) റിയാക്ടിന്റെ സിന്തറ്റിക് ഇവന്റുകളുമായി കലർത്തുമ്പോൾ അതീവ ശ്രദ്ധാലുവായിരിക്കുക. നേറ്റീവ് ലിസണറുകൾ എല്ലായ്പ്പോഴും ഫിസിക്കൽ ഡോം ഹൈറാർക്കിയെ മാനിക്കും, അതേസമയം റിയാക്ടിന്റെ ഇവന്റുകൾ ലോജിക്കൽ റിയാക്ട് ഹൈറാർക്കിയെ മാനിക്കുന്നു. ഇത് മനസ്സിലാക്കിയില്ലെങ്കിൽ അപ്രതീക്ഷിതമായ എക്സിക്യൂഷൻ ക്രമത്തിലേക്ക് നയിച്ചേക്കാം, അവിടെ ഒരു നേറ്റീവ് ഹാൻഡ്‌ലർ ഒരു സിന്തറ്റിക് ഹാൻഡ്‌ലറിന് മുമ്പോ അല്ലെങ്കിൽ തിരിച്ചോ പ്രവർത്തിച്ചേക്കാം, അവ എവിടെ അറ്റാച്ച് ചെയ്തിരിക്കുന്നു, ഇവന്റ് ഘട്ടം എന്നിവയെ ആശ്രയിച്ച്.
• `stopPropagation()`-നെ അമിതമായി ആശ്രയിക്കൽ: നിർദ്ദിഷ്ട സാഹചര്യങ്ങളിൽ ആവശ്യമാണെങ്കിലും, `stopPropagation()`-ന്റെ അമിതമായ ഉപയോഗം നിങ്ങളുടെ ഇവന്റ് ലോജിക്ക് കർക്കശവും പരിപാലിക്കാൻ പ്രയാസമുള്ളതുമാക്കി മാറ്റും. നിങ്ങളുടെ കമ്പോണന്റ് ഇന്ററാക്ഷനുകൾ രൂപകൽപ്പന ചെയ്യാൻ ശ്രമിക്കുക, അങ്ങനെ ഇവന്റുകൾ ബലമായി നിർത്തേണ്ട ആവശ്യമില്ലാതെ സ്വാഭാവികമായി ഒഴുകുന്നു, കമ്പോണന്റ് സ്വഭാവം വേർതിരിക്കാൻ കർശനമായി ആവശ്യമുള്ളപ്പോൾ മാത്രം `stopPropagation()`-നെ ആശ്രയിക്കുക.
• ഇവന്റ് ഹാൻഡ്‌ലറുകൾ ഡീബഗ് ചെയ്യൽ: ഒരു ഇവന്റ് ഹാൻഡ്‌ലർ പ്രതീക്ഷിച്ചപോലെ പ്രവർത്തിക്കുന്നില്ലെങ്കിലോ, അല്ലെങ്കിൽ വളരെയധികം പ്രവർത്തിക്കുന്നുണ്ടെങ്കിലോ, ഇവന്റ് ലിസണറുകൾ പരിശോധിക്കാൻ ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ ഉപയോഗിക്കുക. നിങ്ങളുടെ റിയാക്ട് കമ്പോണന്റിന്റെ ഹാൻഡ്‌ലറുകളിൽ (പ്രത്യേകിച്ച് `onClickCapture`, `onClick`) തന്ത്രപരമായി സ്ഥാപിച്ചിരിക്കുന്ന `console.log` സ്റ്റേറ്റ്‌മെന്റുകൾ ക്യാപ്‌ചറിംഗ്, ബബ്ലിംഗ് ഘട്ടങ്ങളിലൂടെ ഇവന്റിന്റെ പാത കണ്ടെത്താൻ അമൂല്യമാണ്, ഇത് ഇവന്റ് എവിടെയാണ് തടസ്സപ്പെടുത്തുന്നതെന്നോ നിർത്തുന്നതെന്നോ കണ്ടെത്താൻ നിങ്ങളെ സഹായിക്കുന്നു.
• ഒന്നിലധികം പോർട്ടലുകളുമായുള്ള Z-Index യുദ്ധങ്ങൾ: പോർട്ടലുകൾ പാരന്റ് എലമെന്റുകളുടെ z-index പ്രശ്‌നങ്ങളിൽ നിന്ന് രക്ഷപ്പെടാൻ സഹായിക്കുന്നുണ്ടെങ്കിലും, ഡോക്യുമെന്റ് റൂട്ടിൽ ഒന്നിലധികം ഉയർന്ന z-index എലമെന്റുകൾ നിലവിലുണ്ടെങ്കിൽ (ഉദാഹരണത്തിന്, വിവിധ കമ്പോണന്റുകളിൽ/ലൈബ്രറികളിൽ നിന്നുള്ള ഒന്നിലധികം മോഡലുകൾ) അവ ആഗോള z-index വൈരുദ്ധ്യങ്ങൾ പരിഹരിക്കുന്നില്ല. നിങ്ങളുടെ മുഴുവൻ ആപ്ലിക്കേഷനിലുടനീളം ശരിയായ സ്റ്റാക്കിംഗ് ക്രമം ഉറപ്പാക്കാൻ നിങ്ങളുടെ പോർട്ടൽ കണ്ടെയ്നറുകൾക്കായി നിങ്ങളുടെ z-index സ്ട്രാറ്റജി ശ്രദ്ധാപൂർവ്വം ആസൂത്രണം ചെയ്യുക, സ്ഥിരമായ ഒരു വിഷ്വൽ ഹൈറാർക്കി ഉറപ്പാക്കുക.

ഉപസംഹാരം: റിയാക്ട് പോർട്ടലുകളുമായുള്ള ഡീപ് ഇവന്റ് പ്രൊപ്പഗേഷനിൽ വൈദഗ്ദ്ധ്യം നേടുന്നു

റിയാക്ട് പോർട്ടലുകൾ അവിശ്വസനീയമാംവിധം ശക്തമായ ഒരു ഉപകരണമാണ്, ഇത് കർശനമായ ഡോം ഹൈറാർക്കികളിൽ നിന്ന് ഉണ്ടാകുന്ന കാര്യമായ സ്റ്റൈലിംഗ്, ലേഔട്ട് വെല്ലുവിളികളെ മറികടക്കാൻ ഡെവലപ്പർമാരെ പ്രാപ്തരാക്കുന്നു. എന്നിരുന്നാലും, അവയുടെ പൂർണ്ണമായ സാധ്യതകൾ അൺലോക്ക് ചെയ്യുന്നതിനുള്ള താക്കോൽ, റിയാക്ടിന്റെ സിന്തറ്റിക് ഇവന്റ് സിസ്റ്റം ഈ വേർപിരിഞ്ഞ ഡോം ഘടനകളിലുടനീളം ഇവന്റ് പ്രൊപ്പഗേഷൻ എങ്ങനെ കൈകാര്യം ചെയ്യുന്നു എന്നതിനെക്കുറിച്ചുള്ള ആഴത്തിലുള്ള ധാരണയിലാണ്.

"റിയാക്ട് പോർട്ടൽ ഇവന്റ് ടണലിംഗ്" എന്ന ആശയം, റിയാക്ട് എങ്ങനെ ഇവന്റ് ഫ്ലോയ്ക്കായി ലോജിക്കൽ കമ്പോണന്റ് ട്രീക്ക് മുൻഗണന നൽകുന്നു എന്ന് മനോഹരമായി വിവരിക്കുന്നു. പോർട്ടൽ-റെൻഡർ ചെയ്ത എലമെന്റുകളിൽ നിന്നുള്ള ഇവന്റുകൾ അവയുടെ ഫിസിക്കൽ ഡോം ലൊക്കേഷൻ പരിഗണിക്കാതെ, അവയുടെ ആശയപരമായ പാരന്റുകളിലൂടെ ശരിയായി പ്രൊപ്പഗേറ്റ് ചെയ്യുന്നുവെന്ന് ഇത് ഉറപ്പാക്കുന്നു. റിയാക്ട് ട്രീയിലൂടെ ക്യാപ്‌ചറിംഗ് ഘട്ടവും (താഴേക്ക് ടണൽ ചെയ്യൽ) ബബ്ലിംഗ് ഘട്ടവും (മുകളിലേക്ക് ബബിൾ ചെയ്യൽ) പ്രയോജനപ്പെടുത്തുന്നതിലൂടെ, ഡെവലപ്പർമാർക്ക് ഗ്ലോബൽ ക്ലിക്ക്-ഔട്ട്‌സൈഡ് ഹാൻഡ്‌ലറുകൾ പോലുള്ള കരുത്തുറ്റ ഫീച്ചറുകൾ നടപ്പിലാക്കാനും, കോൺടെക്സ്റ്റ് നിലനിർത്താനും, സങ്കീർണ്ണമായ ഇന്ററാക്ഷനുകൾ ഫലപ്രദമായി കൈകാര്യം ചെയ്യാനും കഴിയും, ഇത് ഏത് പ്രദേശത്തുമുള്ള വൈവിധ്യമാർന്ന ഉപയോക്താക്കൾക്ക് പ്രവചിക്കാവുന്നതും ഉയർന്ന നിലവാരമുള്ളതുമായ ഒരു ഉപയോക്തൃ അനുഭവം ഉറപ്പാക്കുന്നു.

ഈ ധാരണ സ്വീകരിക്കുക, ഇവന്റുമായി ബന്ധപ്പെട്ട സങ്കീർണ്ണതകളുടെ ഉറവിടമാകുന്നതിനുപകരം, പോർട്ടലുകൾ നിങ്ങളുടെ റിയാക്ട് ടൂൾകിറ്റിന്റെ സ്വാഭാവികവും അവബോധജന്യവുമായ ഒരു ഭാഗമായി മാറുന്നത് നിങ്ങൾ കണ്ടെത്തും. ഈ വൈദഗ്ദ്ധ്യം സങ്കീർണ്ണമായ യുഐ ആവശ്യകതകളുടെയും ആഗോള ഉപയോക്തൃ പ്രതീക്ഷകളുടെയും പരീക്ഷണങ്ങളെ അതിജീവിക്കുന്ന സങ്കീർണ്ണവും ആക്സസിബിളും പ്രകടനക്ഷമവുമായ ഉപയോക്തൃ അനുഭവങ്ങൾ നിർമ്മിക്കാൻ നിങ്ങളെ അനുവദിക്കും.

കൂടുതൽ വായനയ്ക്ക്:

• React Official Documentation: createPortal
• React Official Documentation: Responding to Events
• MDN Web Docs: Using the dialog role for accessibility